<template>
  <div>
    <el-form :inline="true" :model="form" label-width="80px">
      <el-form-item>
        <el-select v-model="form.region" placeholder="搜索类型">
          <el-option label="申请人" value="adminId"></el-option>
          <el-option label="店铺名" value="name"></el-option>
          <el-option label="店铺地址" value="address"></el-option>
          <el-option label="店铺描述" value="desc"></el-option>
          <el-option label="店铺电话" value="telephone"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.searchMessage" placeholder="请输入搜索内容"  ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 15px;" icon="el-icon-refresh-right"  @click="searchHandle()">重 置</el-button>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="radio" @click.native="applytype0" label="1">门店申请</el-radio>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="radio" @click.native="applytype1" label="2">门店注销</el-radio>
      </el-form-item>
    </el-form>
    <div>
      <el-table
    :data="tableData.filter(data => !form.searchMessage || form.region=='adminId'?data.adminId.name.toLowerCase().includes(form.searchMessage.toLowerCase()):data[form.region].toLowerCase().includes(form.searchMessage.toLowerCase()))"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      width="100"
      >
    </el-table-column>
    <el-table-column
      label="申请人"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.adminId.name}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺名称"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺地址"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺简介"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.desc }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="联系方式"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '未通过', value: 0 },{ text: '审核中', value: 1 }, { text: '已通过', value: 2 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="tags[scope.row.isAvail]"
          disable-transitions>{{handleTags(scope.row)}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column 
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          v-show="scope.row.isAvail===1"
          @click="handleClick(scope.$index, scope.row)">点击处理</el-button>
        <el-button
          size="mini"
          type="warning"
          v-show="scope.row.isAvail !==1"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          v-show="scope.row.isAvail !==1"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <!-- 修改弹出窗 -->
    <div>
      <el-dialog 
      title="编辑信息" 
      status-icon
      :visible.sync="editFormVisible"
    >
    <el-form 
      :model="editform" 
      label-width="80px"
    >
      <el-form-item label="申请人">
        <el-input disabled v-model="editform.adminId.name" ></el-input>
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input disabled v-model="editform.name" ></el-input>
      </el-form-item>
      <el-form-item label="店铺地址">
        <el-input disabled v-model="editform.address"></el-input>
      </el-form-item>
      <el-form-item label="店铺简介">
        <el-input disabled v-model="editform.desc" ></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input disabled v-model="editform.telephone" ></el-input>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      </el-form-item>
    </el-form>  
    <div slot="footer" class="dialog-footer">
      <el-button @click="reseveEditForm">取 消</el-button>
      <el-button type="primary" @click="validateEditForm">确 定</el-button>
    </div>
    </el-dialog>
    </div>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 5, 10, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tags: ["danger", "", "success"],
      form: {
        searchMessage: "",
        region:'name'
      },
      radio: "1",
      tableData: [],
      options: [
        {
          value: 0,
          label: "未通过"
        },
        {
          value: 1,
          label: "申请中"
        },
        {
          value: 2,
          label: "已通过"
        }
      ],
      currentPage: 0,
      pagesize: 0,
      total: 0,
      searchMessage: null,
      editFormVisible: false,
      editform: {
        name: null, // 店名
        address: null, // 地址
        telephone: null, // 电话
        desc: null, // 描述
        adminId: {}, // 所属门店管理员id
        goodsId: [], // 该门店下的商品id
        servicesId: [], // 该门店下的服务id
        isAvail: 1 // 门店申请是否通过审核（0：未通过；1：申请中；2：已通过）
      },
      value: null,
      applytype: 0,
    };
  },
  mounted() {
    // this.$store.dispatch("user/getAll", this.tableData);
    this.getBackData();
  },
  computed: {
    handleTags() {
      //门店申请是否通过审核（0：未通过；1：申请中；2：已通过）
      return function(data) {
        if (data.isAvail === 0) {
          return "未通过";
        } else if (data.isAvail === 1) {
          return "申请中";
        } else if (data.isAvail === 2) {
          return "已通过";
        } else {
          return "";
        }
      };
    }
  },
  methods: {
    //获取数据
    getBackData(current = 1, size = 4) {
      axios
        .get(
          `/admin/shops/find?applytype=${
            this.applytype
          }&&current=${current}&&size=${size}`
        )
        .then(res => {
          console.log("获取数据1", res.data);
          this.tableData = res.data.rows;
          this.currentPage = parseInt(res.data.current);
          this.pagesize = parseInt(res.data.size);
          this.total = parseInt(res.data.total);
        });
    },
    //搜索
    searchHandle() {
      console.log(this.form.searchMessage);
      this.form.searchMessage = '';
      // let type = "name";
      // let value = this.form.searchMessage;
      // axios
      //   .get(`/admin/shops/find?applytype=${this.applytype}&&type=${type}&&value=${value}`)
      //   .then(res => {
      //     this.tableData = res.data.rows;
      //     this.currentPage = parseInt(res.data.current);
      //     this.pagesize = parseInt(res.data.size);
      //     this.total = parseInt(res.data.total);
      //   });
    },
    //点击处理
    handleClick(index, row) {
      this.editform = row;
      this.value = row.isAvail;
      this.editFormVisible = true;
    },
    //修改
    handleEdit(index, row) {
      this.editform = row;
      console.log(row);
      this.value = row.isAvail;
      this.editFormVisible = true;
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.tableData.splice(index, 1);
          axios.delete(`/admin/shops/${row._id}`).then(res => {
            console.log(res);
            this.getBackData(this.currentPage, this.pagesize);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //标签
    filterTag(value, row) {
      // 注册的账号状态（0：未通过；1：申请中；2：已通过）
      return row.isAvail === value;
    },
    //修改弹出窗确认
    validateEditForm() {
      let data = this.editform;
      data.isAvail = this.value;
      console.log(data);
      axios.put(`/admin/shops/${this.editform._id}`, data).then(res => {
        // console.log("修改", res);
        // console.log("this", this);
        this.getBackData(this.currentPage, this.pagesize);
        this.editFormVisible = false;
      });
    },
    reseveEditForm() {
      this.editFormVisible = false;
    },
    //改变每页大小
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let current = 1;
      let size = val;
      this.getBackData(current, size);
    },
    //改变当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let size = this.pagesize;
      this.getBackData(val, size);
    },
    applytype0() {
      this.applytype = 0;
      // console.log("111111111",this.applytype);
      this.getBackData();
    },
    applytype1() {
      this.applytype = 1;
      console.log("111111111",this.applytype);
      this.getBackData();
    }
  }
};
</script>

<style>
</style>